<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <script src="../js/jquery-1.12.4.min.js"></script>
    <script>
        $(function () {
            var $li = $('.list li');

            // 绑定click事件
            $li.click(function () {
                // this关键字, 表示当前发生事件的对象. 就是点那个,那个就是this

                /*if (this.style.color === 'red')
                {
                    this.style.color = 'black';
                }
                else
                {
                    this.style.color = 'red';
                }*/

                // 表示当前发生事件的对象
                $(this).css('color', 'red');
                // 获取当前点的li的索引值
                alert($(this).index());
            });


        })
    </script>

</head>
<body>
    <ul class="list">
        <li>1</li>
        <li>2</li>
        <li>3</li>
        <li>4</li>
        <li>5</li>
        <li>6</li>
        <li>7</li>
        <li>8</li>
    </ul>
</body>
</html>